<template>
  <base-modal
    v-model="visible"
    class="pay-model"
    :title="title"
    :show.sync="visible"
    width="528px"
    @close="initDate">
    <div class="base-dist-picker">
      <base-dist
        v-model="modelValue"
        :placeholder="placeholder"
        @input="distHandle"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="plain-third" @click="visible = false">{{$t('common.base.close')}}</el-button>
      <el-button type="primary" @click="save">{{$t('common.base.save')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
export default {
  name: 'add-authorization-address',
  data() {
    return {
      title: this.$t('serviceProvider.addAuthorizationAddress'),
      editEnable: false,
      visible: false,
      placeholder: this.$t('common.base.pleaseSelect'),
      modelValue: {},
    };
  },
  async mounted(){

  },
  methods: {
    initDate() {
      this.modelValue = {}
    },
    openDialog(placeholder) {
      
      this.initDate();
      this.visible = true;
      this.placeholder = placeholder || this.$t('common.base.pleaseSelect');
    },

    distHandle(value){
      this.modelValue = value
    },
    save() {
      this.visible = false;
      if(this.modelValue.province) this.$emit('updateAddress', this.modelValue);
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .base-modal-body {
  padding: 20px;
}
</style>